<template>
  <div class="user-detail">
    <div style="background: #fff; padding: 0 32px">
      <!-- 面包屑 -->
      <div style="padding: 17px 0 19px">
        <a-breadcrumb>
          <a-breadcrumb-item>商品</a-breadcrumb-item>
          <a-breadcrumb-item>
            <a href="javascipt:;" @click="$router.push({ name: 'UserManagement' })">用户管理</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item>用户详情</a-breadcrumb-item>
        </a-breadcrumb>
      </div>

      <!-- 用户信息 -->
      <div class="flex-x-sb" style="margin-bottom: 19px">
        <div class="flex-y-center">
          <img :src="userData.avatar_url" style="width: 28px; height: 28px" alt="" />
          <span style="margin-left: 16px; font-weight: 600; font-size: 20px">{{ userData.nickname }}</span>
        </div>
        <div>
          <a-button @click="onModify" style="margin-left: 9px">编辑用户</a-button>
          <a-button @click="modifyPrice" type="primary" style="margin-left: 9px">设置积分/余额</a-button>
          <a-button :loading="exporting" @click="exportJf" type="primary" style="margin-left: 9px">导出积分记录</a-button>
        </div>
      </div>

      <!-- 用户信息 -->
      <div>
        <a-row>
          <a-col :span="11">
            <a-col :span="12">
              <div style="line-height: 30px">
                <span style="width: 70px; display: inline-block">会员等级:</span>{{ userData.l_name }}
              </div>
              <div style="line-height: 30px">
                <span style="width: 70px; display: inline-block">手机号码:</span>{{ userData.binding }}
              </div>
              <div style="line-height: 30px">
                <span style="width: 70px; display: inline-block">加入时间:</span
                >{{ (userData.created_at * 1000) | moment }}
              </div>
              <div style="line-height: 30px">
                <span style="width: 70px; display: inline-block">用户备注:</span> {{ userData.comments }}
              </div>
            </a-col>
            <a-col :span="12">
              <div style="line-height: 30px">
                <span style="width: 70px; display: inline-block">上级分销:</span>
                <span style="color: #1890ff">{{ userData.parent_name }}</span>
              </div>
              <div style="line-height: 30px">
                <span style="width: 70px; display: inline-block">黑名单:</span
                >{{ userData.blacklist == 1 ? '是' : '否' }}
              </div>
            </a-col>
          </a-col>

          <a-col :span="13">
            <div class="price-box">
              <div>
                <div>可提现佣金</div>
                <div>￥ {{ userData.price }}</div>
              </div>
              <div>
                <div>累计佣金</div>
                <div>￥ {{ userData.total_price }}</div>
              </div>
              <div>
                <div>积分</div>
                <div>{{ userData.integral }}</div>
              </div>
              <div>
                <div>账户余额</div>
                <div>￥ {{ userData.money }}</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>

      <!-- tabs -->
      <div class="tabs">
        <span @click="clickTab(2)" :class="tabIndex == 2 ? 'select' : ''">余额记录</span>
        <span @click="clickTab(1)" :class="tabIndex == 1 ? 'select' : ''">积分记录</span>
        <span @click="clickTab(3)" :class="tabIndex == 3 ? 'select' : ''">会员记录</span>
      </div>
    </div>

    <div class="table-box">
      <!-- 积分 -->
      <STable v-if="tabIndex == 1" ref="table" rowKey="id" :columns="integralColumns" :data="loadData" key="1">
        <span slot="type" slot-scope="text, item">
          <span v-if="parseFloat(item.after) < parseFloat(item.before)">支出</span>
          <span v-else>收入</span>
        </span>
        <!-- 时间设置 -->
        <span slot="created_at" slot-scope="text">
          {{ (text * 1000) | moment }}
        </span>
      </STable>
      <!-- 余额 -->
      <STable v-else-if="tabIndex == 2" ref="table" rowKey="id" :columns="balanceColumns" :data="loadData" key="1">
        <span slot="type" slot-scope="text, item">
          <span v-if="parseFloat(item.after) < parseFloat(item.before)">支出</span>
          <span v-else>收入</span>
        </span>
        <!-- 时间设置 -->
        <span slot="created_at" slot-scope="text, item">
          {{ (text * 1000) | moment }}
        </span>
      </STable>
      <STable v-else-if="tabIndex == 3" ref="table" rowKey="id" :columns="memberCOlumns" :data="loadData" key="2">
        <!-- <span slot="nickname" slot-scope="text, scope">
          <span>{{ text }} {{ scope }}</span>
        </span> -->
      </STable>
    </div>

    <!-- 编辑用户-->
    <a-modal
      title="编辑用户"
      :width="650"
      :confirm-loading="modalLoading"
      :mask-closable="false"
      :destroy-on-close="true"
      v-model="modifyShow"
      @ok="modalSumit"
    >
      <el-form ref="modifyForm" label-width="100px" label-suffix="：" :form="modalData" size="small">
        <el-form-item label="用户名">
          <el-input disabled v-model="modalData.nickname" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="上级">
          <SelectUer
            @userInfo="getInfo"
            dataType="single"
            returnType="id"
            selectType="user"
            :defaultUser="modalData.parent_id"
          >
          </SelectUer>
        </el-form-item>
        <el-form-item label="会员等级">
          <el-select style="width: 100%" v-model="modalData.level" placeholder="">
            <el-option v-for="item in levelList" :key="item.level" :label="item.name" :value="item.level"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="核销员">
          <a-radio-group v-model="modalData.is_saas_clerk">
            <a-radio value="0">否</a-radio>
            <a-radio value="1">是</a-radio>
          </a-radio-group>
        </el-form-item>
        <el-form-item label="加入黑名单">
          <a-radio-group v-model="modalData.blacklist">
            <a-radio value="0">关闭</a-radio>
            <a-radio value="1">开启</a-radio>
          </a-radio-group>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="modalData.contact_way" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="累计佣金">
          <el-input v-model="modalData.total_price" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="可提现佣金">
          <el-input v-model="modalData.price" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="modalData.comments" placeholder=""></el-input>
        </el-form-item>
      </el-form>
    </a-modal>
    <a-modal
      title="设置积分/余额"
      :width="500"
      :confirm-loading="modalLoading"
      :mask-closable="false"
      :destroy-on-close="true"
      v-model="rechargeVisible"
      @ok="updateUserRecharge"
    >
      <el-form size="small" label-suffix="：" label-width="100px">
        <el-form-item label="操作选项">
          <el-select style="width: 100%" v-model="priceForm.type" placeholder="请选择操作项">
            <el-option label="积分" :value="1"></el-option>
            <el-option label="余额" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作选项">
          <a-radio-group v-model="priceForm.recharge_type">
            <a-radio :value="1">充值</a-radio>
            <a-radio :value="2">扣除</a-radio>
          </a-radio-group>
        </el-form-item>
        <el-form-item label="数量/金额">
          <el-input v-if="priceForm.type == 1" v-model="priceForm.integral" type="number" placeholder=""></el-input>
          <el-input v-else v-model="priceForm.money" type="number" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input type="textarea" v-model="priceForm.explain" placeholder=""></el-input>
        </el-form-item>
      </el-form>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import { updateUserInfo, getUserList } from '@/api/user'
import { getRechargeList, userRecharge, expRechargeList } from '@/api/recharge'
import SelectUer from '@/components/SelectUser/SelectUser1'
// 会员table规则
const memberCOlumns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '订单号',
    dataIndex: 'order_no'
  },
  {
    title: '昵称',
    dataIndex: 'nickname'
  },
  {
    title: '支付金额',
    dataIndex: 'pay_price',
    sorter: (a, b) => a.pay_price - b.pay_price
  },
  {
    title: '购买前',
    dataIndex: 'current_name'
  },
  {
    title: '购买后',
    dataIndex: 'after_name'
  },
  {
    title: '支付日期',
    dataIndex: 'pay_time',
    sorter: (a, b) => new Date(a.pay_time).getTime() - new Date(b.pay_time).getTime()
  }
]
// 余额table规则
const balanceColumns = [
  {
    title: '类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '充值/扣减数额',
    dataIndex: 'amount',
    scopedSlots: { customRender: 'amount' },
    sorter: (a, b) => a.amount - b.amount
  },
  {
    title: '更改前',
    dataIndex: 'before',
    sorter: (a, b) => a.before - b.before
  },
  {
    title: '更改后',
    dataIndex: 'after',
    sorter: (a, b) => a.after - b.after
  },
  {
    title: '操作时间',
    dataIndex: 'created_at',
    scopedSlots: { customRender: 'created_at' },
    sorter: (a, b) => a.created_at - b.created_at
  },
  {
    title: '操作者',
    dataIndex: 'operator'
  },
  {
    title: '说明',
    dataIndex: 'desc'
  }
]
const integralColumns = [
  {
    title: '类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '充值/扣减数额',
    dataIndex: 'amount',
    scopedSlots: { customRender: 'amount' },
    sorter: (a, b) => a.amount - b.amount
  },
  {
    title: '更改前',
    dataIndex: 'before',
    sorter: (a, b) => a.before - b.before
  },
  {
    title: '更改后',
    dataIndex: 'after',
    sorter: (a, b) => a.after - b.after
  },
  {
    title: '操作时间',
    dataIndex: 'created_at',
    scopedSlots: { customRender: 'created_at' },
    sorter: (a, b) => a.created_at - b.created_at
  },
  {
    title: '操作者',
    dataIndex: 'operator'
  },
  {
    title: '说明',
    dataIndex: 'desc'
  }
]
export default {
  name: 'SaasUserDetail',
  components: {
    STable,
    SelectUer
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    },
    modalTitle() {
      switch (this.modalData.type) {
        case 'remark':
          return '请填入备注信息'

        case 'money':
          return '充值/扣除余额'

        case 'blacklist':
          return '黑名单'

        case 'integral':
          return '充值/扣除积分'

        case 'grade':
          return '等级设置'

        default:
          return '出错了'
      }
    }
  },
  data() {
    return {
      exporting: false,
      rechargeVisible: false,
      loading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      memberCOlumns,
      balanceColumns,
      integralColumns,
      user_id: '',
      modalLoading: false,
      levelList: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: async parameter => {
        try {
          var form = {
            ...parameter,
            user_id: this.user_id,
            type: this.tabIndex
          }
          const res = await getRechargeList(form)
          console.log('getRechargeList', res.data.data)
          if (res.code != 0) throw res
          this.userData = res.data.detail
          this.modalData = {
            id: this.user_id, // 用户id
            nickname: res.data.detail.nickname, // 用户名
            parent_id: res.data.detail.parent_id, // 上级id
            level: res.data.detail.level, // 会员等级
            is_saas_clerk: res.data.detail.is_saas_clerk, // 是否核销员
            blacklist: res.data.detail.blacklist, // 加入黑名单
            contact_way: res.data.detail.contact_way, // 联系方式
            total_price: res.data.detail.total_price, // 累计佣金
            price: res.data.detail.price, // 可提现佣金
            comments: res.data.detail.comments // 备注
          }
          this.levelList = res.data.level
          return res.data
        } catch (error) {
          this.$message.error(error.msg)
          // this.$refs.table.localLoading = false
        }
      },
      tabIndex: 2, // 1积分 2余额 3会员
      userData: '',
      modifyShow: false,
      modalData: {
        nickname: null, // 用户名
        parent_id: null, // 上级id
        level: null, // 会员等级
        is_saas_clerk: null, // 是否核销员
        blacklist: null, // 加入黑名单
        contact_way: null, // 联系方式
        total_price: null, // 累计佣金
        price: null, // 可提现佣金
        comments: null // 备注
      },
      value: '',
      userList: [],
      // 积分余额表单
      priceForm: {
        user_id: this.user_id,
        recharge_type: 1,
        type: 2,
        integral: 0,
        money: 0,
        explain: ''
      }
    }
  },
  created() {
    // 根据昵称获取数据
    this.user_id = JSON.parse(this.$route.query.user_id)
  },
  methods: {
    // 修改积分余额
    modifyPrice() {
      this.rechargeVisible = true
    },
    // 积分余额修改提交
    async updateUserRecharge() {
      this.modalLoading = true
      try {
        const res = await userRecharge({ ...this.priceForm, user_id: this.user_id })
        if (res.code != 0) throw res
        this.$message.success(res.msg)
        this.modalLoading = false
        this.rechargeVisible = false
        this.priceForm = this.$options.data().priceForm
        this.$refs.table.refresh()
      } catch (error) {
        this.modalLoading = false
      }
    },
    getInfo(id) {
      console.log(id)
      this.modalData.parent_id = id
    },
    onModify() {
      this.modifyShow = true
    },
    // 切换tabs
    clickTab(index) {
      this.tabIndex = index
      this.$refs.table.refresh(true)
    },
    exportJf() {
      this.exporting = true;
      let parameter = {
        _filename: '积分记录.xlsx',
        pageNo: 1,
        pageSize: 100000,
        user_id: this.user_id,
        type: 1,
        export: 1
      };
      expRechargeList(parameter).then(()=>{
        this.exporting = false;
      });
    },
    async modalSumit() {
      try {
        this.modalLoading = true
        const res = await updateUserInfo(this.modalData)
        if (res.code != 0) throw res
        this.$message.success(res.msg)
        this.modalLoading = false
        this.modifyShow = false
        this.$refs.table.refresh()
      } catch (error) {
        this.modalLoading = false
      }
    },
    async remoteMethod(v) {
      this.loading = true
      const res = await getUserList({ type: 'type', name: v })
      this.loading = false

      if (res.code != 0) return
      this.userList = res.data.data
    }
  }
}
</script>

<style lang="less">
.user-detail {
  .tabs {
    display: flex;
    margin-top: 20px;
    > span {
      cursor: pointer;
      margin-right: 36px;
      height: 33px;
    }
    .select {
      position: relative;
      color: #1890ff;
      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: #1890ff;
      }
    }
  }

  .table-box {
    margin: 34px 24px 0;
    padding: 25px;
    background: #fff;
  }
}
.price-box {
  display: flex;
  justify-content: flex-end;
  > div {
    margin-left: 40px;
    text-align: right;
    > div:nth-child(1) {
      line-height: 30px;
      color: rgba(0, 0, 0, 0.45);
    }
    > div:nth-child(2) {
      line-height: 33px;
      font-size: 20px;
      font-weight: 600;
    }
  }
}
</style>
